"Image Hover Zoom"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div align="center" class="fond">
<div class="title">CSS HOVER ZOOM EFFECT</div>
<div style="width:1000px;margin-top:50px;margin-bottom:50px;">
<div class="style_prevu_kit" style="background-color:#5C3A7E;"></div>
<div class="style_prevu_kit" style="background-color:#f8b334;"></div>
<div class="style_prevu_kit" style="background-color:#97bf0d;"></div>
<div class="style_prevu_kit" style="background-color:#2578B4;"></div>
<div class="style_prevu_kit" style="background-color:#FD443A;"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
.title{text-shadow:1px 1px 1px #000;padding:5px;color:#b5e6e3;font-weight:300;font-size:30px;font-family:'Roboto';padding-top:20px;}
.title:hover{-webkit-transition: all 300ms ease-in;-ms-transition: all 300ms ease-in;-moz-transition: all 300ms ease-in;transition: all 300ms ease-in;font-size:35px;}
.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;background: -moz-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: -webkit-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: -o-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: -ms-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);}
.style_prevu_kit{display:inline-block;border:0;width:196px;height:210px;position: relative;-webkit-transition: all 300ms ease-in;-webkit-transform: scale(1);-ms-transition: all 300ms ease-in;-ms-transform: scale(1);-moz-transition: all 300ms ease-in;-moz-transform: scale(1);transition: all 300ms ease-in;transform: scale(1);}
.style_prevu_kit:hover{box-shadow: 0px 0px 150px #000000;z-index: 2;-webkit-transition: all 300ms ease-in;-webkit-transform: scale(1.5);-ms-transition: all 300ms ease-in;-ms-transform: scale(1.5);-moz-transition: all 300ms ease-in;-moz-transform: scale(1.5);transition: all 300ms ease-in;transform: scale(1.5);border-radius: 500px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro Angular
Image Crop jQuery
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: